import { useEffect } from 'react';
import { NavBar, Space, DotLoading } from 'antd-mobile';
import { SearchOutline } from 'antd-mobile-icons';
import { connect, useDispatch, useSelector } from 'umi';

export default function Cinema(props: any) {
  const dispatch = useDispatch();

  const storeState = useSelector((state: any) => {
    return {
      cityName: state.city.cityName,
      list: state.cinema.list,
      cityId: state.city.cityId,
      loading: state.loading.global,
    };
  });

  useEffect(() => {
    if (storeState.list.length === 0) {
      // 请求数据
      dispatch({
        type: 'cinema/getList',
        payload: {
          cityId: storeState.cityId,
        },
      });
    } else {
      // cache
      console.log('cache');
    }
  }, []);

  const right = (
    <div style={{ fontSize: 24 }}>
      <Space style={{ '--gap': '16px' }}>
        <SearchOutline />
      </Space>
    </div>
  );

  const back = () => {
    // 清空cinema list
    dispatch({
      type: 'cinema/changeList',
      payload: [],
    });
    props.history.push('/city');
  };

  return (
    <div>
      <NavBar
        back={storeState.cityName}
        right={right}
        backArrow={false}
        onBack={back}
      >
        标题
      </NavBar>
      {
        storeState.loading && (
          <div style={{ fontSize: 14, textAlign: 'center' }}>
            <DotLoading color="primary" />
          </div>
        )
      }
      <ul>
        {storeState.list.map((item: any) => {
          return <li key={item.cinemaId}>{item.name}</li>;
        })}
      </ul>
    </div>
  );
}

// export default connect((state: any) => {
//   return { cityName: state.city.cityName, list: state.cinema.list };
// })(Cinema);
